<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div class="head">
        <div class="heading">
            <a><img src="./img/下载.png" alt=""></a>
            <strong>
                <p>网站无障碍</p>
                <p>"登陆页面"改进建议</p>
            </strong>
        </div>
    </div>

    <div class="Carousel">

    </div>

    <div class="Sign">
        <ul>
            <li>短信登录</li>
            <li>账号登陆</li>
            <li>扫码登录</li>
        </ul>
        <!-- 短信登录 -->
        <div class="cont">
            <div>
                <input name="fm-sms-login-id" type="text" class="mobile" id="fm-sms-login-id" tabindex="1"
                    placeholder="请输入手机号码" autocapitalize="off">
            </div>
            <div class="uni">
                <div>
                    <input name="fm-smscode" type="text" class="mobile" id="fm-smscode" tabindex="2" aria-label="请输入验证码"
                        placeholder="请输入验证码" maxlength="6" autocapitalize="off" autocomplete="off">
                </div>
                <div class="code">
                    <a href="#">获取验证码</a>
                </div>
            </div>
            <div class="btn">
                <button type="submit">登录</button>
            </div>
            <div class="links">
                <a href="">免费注册</a>
            </div>
        </div>
        <!-- 账号登录 -->
        <div class="conting" >
            <div >
                <input name="fm-sms-login-id" type="text" class="mobile" id="username" tabindex="1"
                    placeholder="请输入账号" autocapitalize="off"  type="password"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               >
            </div>
            <div>
                <input name="fm-smscode" type="text" class="mobile" id="password" tabindex="2" aria-label="请输入密码"
                    placeholder="请输入密码"  autocomplete="off">
            </div>
            <div class="btn">
                <button type="submit" id="btn">登录</button>
            </div>
            <div class="linking">
                <span><a href="">忘记账号</a></span>
                <span><a href="">忘记密码</a></span>
                <span><a href="">免费注册</a></span>
            </div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">阿里巴巴集团</a></li>
            <li><a href="#">阿里巴巴国际站</a></li>
            <li><a href="#">阿里巴巴中国站</a></li>
            <li><a href="#">全球速卖通</a></li>
            <li><a href="#">淘宝网</a></li>
            <li><a href="#">天猫</a></li>
            <li><a href="#">聚划算</a></li>
            <li><a href="#">一淘</a></li>
            <li><a href="#">阿里妈妈</a></li>
            <li><a href="#">飞猪</a></li>
            <li><a href="#">虾米</a></li>
            <li><a href="#">阿里云计算</a></li>
            <li><a href="#">云OS</a></li>
            <li><a href="#">万网</a></li>
            <li><a href="#">支付宝</a></li>
        </ul>
    </div>
    <div class="last">
        <ul>
            
            <li><a href="#">关于淘宝</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">营销中心</a></li>
            <li><a href="#">廉正举报</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">开放平台</a></li>
            <li><a href="#">诚征英才</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a href="#">隐私权政策</a></li>
            <li><a href="#">法律声明</a></li>
            <li><a href="#">知识产权</a></li>
            <li><a href="#">版权所有</a></li>
            <span>© 2003-现在 Taobao.com 版权所有</span>
            <li><a href="#">增值电信业务经营许可证：浙B2-20080224</a></li>
            <li><a href="#">增值电信业务经营许可证（跨地区）： B2-20150210</a></li>
            <span>浙网文（2019）1033-086号</span>
            <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
            <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
            <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
            <span>信息网络传播视听许可证：1109364号</span>
            <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
            <span>浙公网安备 33010002000078号</span>
            <span>广播电视节目制作经营许可证（浙）字第01012号</span>
            <span>市场名称登记证：工商网市字3301004120号</span>
            <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
        </ul>
    </div>
</body>
<script>
    let ali = document.querySelectorAll(".Sign ul li");
    let acont = document.querySelector(".Sign .cont");
    let acons = document.querySelector(".Sign .conting");
    const oun = document.querySelector("username")
    const opw = document.querySelector("password")
    
    var index = 1;
    ali[index].className = "active"
    acons.style.display = "block"


    for (let i = 0; i < ali.length; i++) {
        ali[i].onclick = function () {
            for (let i = 0; i < ali.length; i++) {
                ali[i].style.backgroundColor = "#f5f5f6"
            }
            this.style.backgroundColor = "#fff"
            this.className = "none"
            this.className = "active"
            if (i === 0) {
                acont.style.display = "block";
                acons.style.display = "none";

            } if (i === 1) {
                acons.style.display = "block";
                acont.style.display = "none";
            }
            index = this.index;
        }
    }
const ob1 = document.querySelector(".conting .btn")
console.log(ob1);
    ob1.onclick = function(){
        console.log(111);
        const ousername = document.querySelector("#username");
        const opassword = document.querySelector("#password");
    
        ajax2({
            type: "get",
            url: "http://localhost:3000/login",
            data:{
                username: ousername.value,
                password: opassword.value
            },
            success: res=>{
                console.log(JSON.parse(res));
                if(JSON.parse(res).code === 1){
                    location.href = "http://localhost:3000/index.html";
                    location.href = `http://localhost:3000/index.html?${ousername.value}`;
                }
            },
            error: code=>{
                console.log(code);
            }
        })
    }





    // ob1.onclick = function(){
    //     // 发起登录请求，携带数据
    //     ajaxGet({
    //         url: "http://localhost:3000/login",
    //         data:{
    //             username: oun.value,
    //             password: opw.value
    //         },
    //         success:res=>{
    //             console.log(res);
    //         },
    //         error:code=>{
    //             console.log(code);
    //         }
    //     })
    // }

    function ajax2Get(ops = {}){
        let {type="get", success, error, data={}, url} = ops;
        // 1. 将对象数据处理成query数据
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`
        }
        // 2. 拼接到url
        url += "?" + str.slice(0,-1);
        // 3. 创建ajax请求
        const xhr = new XMLHttpRequest();
        xhr.open(type, url, true);
        xhr.onreadystatechange = function(){
            console.log(xhr.status);
            if(xhr.readyState === 4 && xhr.status === 200){
                success(xhr.responseText);
            }else if(xhr.readyState === 4 && xhr.status !== 200){
                error && error(xhr.status);
            }
        }
        xhr.send();
    }

    function ajax2(ops={}){
        let {type="get", success, error, url, data={}, timeout=100} = ops;
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        url = type==="get" ? url+"?"+str.slice(0,-1) : url;
        const xhr = new XMLHttpRequest();
        xhr.timeout = timeout;
        xhr.open(type, url, true);
        xhr.onload = function(){
            if(xhr.status === 200){
                if(success) success(xhr.responseText);
            }else{
                if(error) error(xhr.status);
            }
        }
        xhr.ontimeout = function(){
            if(error) error("timeout");
            xhr.abort();
        }
        if(type === "post"){
            xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
            xhr.send( str.slice(0,-1) );
        }else{
            xhr.send();
        }
    }
</script>

</html> 